<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>扩展表单</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            下拉框扩展插件（select2）
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">常规下拉框：</label>
                                    <div class="col-sm-8">
                                        <select class="form-control select2">
                                            <option value="">请选择选项内容</option>
                                            <option>选项内容一</option>
                                            <option>选项内容二</option>
                                            <option>选项内容三</option>
                                            <option>选项内容四</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">默认选中选项：</label>
                                    <div class="col-sm-8">
                                        <select class="form-control select2">
                                            <option value="">请选择选项内容</option>
                                            <option selected>选项内容一</option>
                                            <option>选项内容二</option>
                                            <option>选项内容三</option>
                                            <option>选项内容四</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">禁用选项选择：</label>
                                    <div class="col-sm-8">
                                        <select class="form-control select2">
                                            <option value="">请选择选项内容</option>
                                            <option>选项内容一</option>
                                            <option disabled>选项内容二</option>
                                            <option>选项内容三</option>
                                            <option>选项内容四</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">分组下拉框：</label>
                                    <div class="col-sm-8">
                                        <select class="form-control select2">
                                            <option>请选择内容</option>
                                            <optgroup label="颜色分组">
                                                <option>红色</option>
                                                <option>黄色</option>
                                                <option>蓝色</option>
                                                <option>绿色</option>
                                            </optgroup>
                                            <optgroup label="尺寸分组">
                                                <option>超大号</option>
                                                <option>大号</option>
                                                <option>中号</option>
                                                <option>小号</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">多选下拉框：</label>
                                    <div class="col-sm-8">
                                        <select class="form-control select2" multiple>
                                            <option>选项内容一</option>
                                            <option>选项内容二</option>
                                            <option>选项内容三</option>
                                            <option>选项内容四</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">分组多选：</label>
                                    <div class="col-sm-8">
                                        <select class="form-control select2" multiple>
                                            <optgroup label="颜色分组">
                                                <option>红色</option>
                                                <option selected>黄色</option>
                                                <option selected>蓝色</option>
                                                <option>绿色</option>
                                            </optgroup>
                                            <optgroup label="尺寸分组">
                                                <option>超大号</option>
                                                <option>大号</option>
                                                <option>中号</option>
                                                <option>小号</option>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            切换开关
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">切换字体图标：</label>
                                    <div class="col-sm-9">
                                        <p>
                                            <i class="fa fa-2x fa-toggle-on text-primary"></i>
                                            <i class="fa fa-2x fa-toggle-on text-success"></i>
                                            <i class="fa fa-2x fa-toggle-on text-info"></i>
                                            <i class="fa fa-2x fa-toggle-on text-warning"></i>
                                            <i class="fa fa-2x fa-toggle-on text-danger"></i>
                                            <i class="fa fa-2x fa-toggle-off text-primary"></i>
                                            <i class="fa fa-2x fa-toggle-off text-success"></i>
                                            <i class="fa fa-2x fa-toggle-off text-info"></i>
                                            <i class="fa fa-2x fa-toggle-off text-warning"></i>
                                            <i class="fa fa-2x fa-toggle-off text-danger"></i>
                                        </p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">切换控件：</label>
                                    <div class="col-sm-9">
                                        <p>
                                            <label class="toggle-switch ">
                                                <input type="checkbox" id="state" value="1">
                                            </label>
                                            <label class="toggle-switch toggle-primary">
                                                <input type="checkbox" id="state" value="1">
                                            </label>
                                            <label class="toggle-switch toggle-success">
                                                <input type="checkbox" id="state" value="1">
                                            </label>
                                            <label class="toggle-switch toggle-info">
                                                <input type="checkbox" id="state" value="1">
                                            </label>
                                            <label class="toggle-switch toggle-warning">
                                                <input type="checkbox" id="state" value="1">
                                            </label>
                                            <label class="toggle-switch toggle-danger">
                                                <input type="checkbox" id="state" value="1">
                                            </label>
                                            <label class="toggle-switch ">
                                                <input type="checkbox" id="state" value="1" checked>
                                            </label>
                                            <label class="toggle-switch toggle-primary">
                                                <input type="checkbox" id="state" value="1" checked>
                                            </label>
                                            <label class="toggle-switch toggle-success">
                                                <input type="checkbox" id="state" value="1" checked>
                                            </label>
                                            <label class="toggle-switch toggle-info">
                                                <input type="checkbox" id="state" value="1" checked>
                                            </label>
                                            <label class="toggle-switch toggle-warning">
                                                <input type="checkbox" id="state" value="1" checked>
                                            </label>
                                            <label class="toggle-switch toggle-danger">
                                                <input type="checkbox" id="state" value="1" checked>
                                            </label>
                                        </p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">切换选项：</label>
                                    <div class="col-sm-9">
                                        <p>
                                            <label class="switch-radio-group ">
                                                <label class="switch-radio">
                                                    <input type="radio" name="1" value="1" checked>
                                                    <span class="switch-radio-title">开始</span>
                                                </label>
                                                <label class="switch-radio">
                                                    <input type="radio" name="1" value="0">
                                                    <span class="switch-radio-title">结束</span>
                                                </label>
                                            </label>
                                            <label class="switch-radio-group switch-radio-success">
                                                <label class="switch-radio">
                                                    <input type="radio" name="11" value="1" checked>
                                                    <span class="switch-radio-title">开始</span>
                                                </label>
                                                <label class="switch-radio switch-radio-info">
                                                    <input type="radio" name="11" value="0">
                                                    <span class="switch-radio-title">结束</span>
                                                </label>
                                            </label>
                                            <label class="switch-radio-group switch-radio-warning">
                                                <label class="switch-radio">
                                                    <input type="radio" name="12" value="1" checked>
                                                    <span class="switch-radio-title">开始</span>
                                                </label>
                                                <label class="switch-radio">
                                                    <input type="radio" name="12" value="0">
                                                    <span class="switch-radio-title">结束</span>
                                                </label>
                                            </label>
                                            <label class="switch-radio-group switch-radio-danger">
                                                <label class="switch-radio">
                                                    <input type="radio" name="13" value="1" checked>
                                                    <span class="switch-radio-title">开始</span>
                                                </label>
                                                <label class="switch-radio">
                                                    <input type="radio" name="13" value="0">
                                                    <span class="switch-radio-title">结束</span>
                                                </label>
                                            </label>
                                            <label class="switch-radio-group switch-radio-primary">
                                                <label class="switch-radio">
                                                    <input type="radio" name="14" value="1">
                                                    <span class="switch-radio-title">男生</span>
                                                </label>
                                                <label class="switch-radio ">
                                                    <input type="radio" name="14" value="0">
                                                    <span class="switch-radio-title">女生</span>
                                                </label>
                                                <label class="switch-radio ">
                                                    <input type="radio" name="14" value="2" checked>
                                                    <span class="switch-radio-title">保密</span>
                                                </label>
                                            </label>
                                            <label class="switch-radio-group switch-radio-info">
                                                <label class="switch-radio">
                                                    <input type="radio" name="15" value="1">
                                                    <span class="switch-radio-title">男生</span>
                                                </label>
                                                <label class="switch-radio ">
                                                    <input type="radio" name="15" value="0">
                                                    <span class="switch-radio-title">女生</span>
                                                </label>
                                                <label class="switch-radio ">
                                                    <input type="radio" name="15" value="2" checked>
                                                    <span class="switch-radio-title">保密</span>
                                                </label>
                                            </label>
                                        </p>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            输入框组合
                        </div>
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">前置标签：</label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <span class="input-group-addon bg-danger">
                                                http://
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">后置标签：</label>
                                    <div class="col-sm-9">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="">
                                            <span class="input-group-addon">
                                                @163.com
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">前后混合：</label>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                http://
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                            <span class="input-group-addon">
                                                .com
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="fa fa-rmb"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                            <span class="input-group-addon">
                                                .00
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">单选/多选组合：</label>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <span class="input-group-addon ">
                                                <label class="checkbox-inline">
                                                    <input type="checkbox">重要
                                                </label>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <label class="radio-inline">
                                                    <input type="radio" name="radio">重要
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" name="radio">普通
                                                </label>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">背景色设置：</label>
                                    <div class="col-sm-1">
                                        <div class="input-group">
                                            <span class="input-group-addon addon-gray">
                                                <i class="fa fa-rmb"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="input-group">
                                            <span class="input-group-addon addon-primary">
                                                <i class="fa fa-rmb"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="input-group">
                                            <span class="input-group-addon addon-success">
                                                <i class="fa fa-rmb"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="input-group">
                                            <span class="input-group-addon addon-info">
                                                <i class="fa fa-rmb"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="input-group">
                                            <span class="input-group-addon addon-warning">
                                                <i class="fa fa-rmb"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="input-group">
                                            <span class="input-group-addon addon-danger">
                                                <i class="fa fa-rmb"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">按钮组合：</label>
                                    <div class="col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-primary">搜</button>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="">
                                            <span class="input-group-btn">
                                                <button type="button" class="btn btn-default">
                                                    <i class="fa fa-search"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">下拉菜单组合：</label>
                                    <div class="col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-btn">
                                                <button type="button" data-toggle="dropdown"
                                                    class="btn btn-default dropdown-toggle">操作<span
                                                        class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="#">选项1</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项2</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项3</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a href="#">选项4</a>
                                                    </li>
                                                </ul>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="">
                                            <span class="input-group-btn">
                                                <button type="button" data-toggle="dropdown"
                                                    class="btn btn-default dropdown-toggle">操作<span
                                                        class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="#">选项1</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项2</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项3</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a href="#">选项4</a>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="input-group">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button">操作</button>
                                                <button type="button" data-toggle="dropdown"
                                                    class="btn btn-default dropdown-toggle"><span
                                                        class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="#">选项1</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项2</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项3</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a href="#">选项4</a>
                                                    </li>
                                                </ul>
                                            </span>
                                            <input type="text" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <div class="input-group">
                                            <input type="text" class="form-control" placeholder="">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button">操作</button>
                                                <button type="button" data-toggle="dropdown"
                                                    class="btn btn-default dropdown-toggle"><span
                                                        class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a href="#">选项1</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项2</a>
                                                    </li>
                                                    <li>
                                                        <a href="#">选项3</a>
                                                    </li>
                                                    <li class="divider"></li>
                                                    <li>
                                                        <a href="#">选项4</a>
                                                    </li>
                                                </ul>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>